<template>
  <el-dialog
    class="association-project-comp"
    title="新增所属项目"
    :close-on-click-modal="false"
    :append-to-body="true"
    :destroy-on-close="true"
    :visible="visible"
    :width="$setRem(1200)"
    :before-close="handleCancel">
    <div class="table-container">
      <div class="table-content">
        <div class="search-container">
          <el-input
            placeholder="项目名称/项目简称"
            v-model="condition"
            @blur="handleSearch"
            @keydown.native.enter="handleSearch"
          ></el-input>
          <el-button class="search-btn" type="primary" @click="handleSearch">
            <i class="el-icon-search"></i>
          </el-button>
          <el-button type="primary" @click="handleRefresh">
            <i class="el-icon-refresh"></i>
          </el-button>
        </div>
        <el-table
          v-loading="tableLoading"
          element-loading-custom-class="custom-load"
          :data="projectList"
          :height="$setRem(500, false)"
          row-key="id">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column prop="projectName" label="项目名称">
            <template slot-scope="scope">
              <span class="btn" @click="handleAdd(scope.row, scope['$index'])">
                {{ scope.row.projectName }}
              </span>
            </template>
          </el-table-column>
          <el-table-column prop="projectAbbreviation" label="项目简称"></el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
      </div>
      <div class="table-content">
        <div class="search-container btns">
          <span class="title">已选</span>
          <el-button type="danger" @click="clear" size="small">清空</el-button>
        </div>
        <el-table
          :height="$setRem(500, false)"
          :data="selectList"
          row-key="id">
          <el-table-column label="序号" type="index" width="80"></el-table-column>
          <el-table-column prop="projectName" label="项目名称"></el-table-column>
<!--          <el-table-column prop="roleName" label="角色名称">-->
<!--            <template slot-scope="scope">-->
<!--              <el-select-->
<!--                filterable-->
<!--                :loading="selectLoading"-->
<!--                placeholder="请选择角色名称"-->
<!--                @click.native="handleSelect(scope.row)"-->
<!--                :value="scope.row.roleId"-->
<!--                @change="(v) => handleChange(v, scope.row, scope['$index'])">-->
<!--                <el-option-->
<!--                  v-for="item in roleList"-->
<!--                  :key="item.id"-->
<!--                  :label="item.roleName"-->
<!--                  :value="item.id">-->
<!--                  {{ item.roleName }}-->
<!--                </el-option>-->
<!--              </el-select>-->
<!--            </template>-->
<!--          </el-table-column>-->
          <el-table-column prop="action" label="操作" width="100">
            <template slot-scope="scope">
              <el-button type="danger" size="small" @click="handleDelete(scope.row, scope['$index'])">
                删除
              </el-button>
            </template>
          </el-table-column>
          <div class="empty-content" slot="empty">
            <i class="iconfont iconwushuju"></i>
            <p>暂无数据</p>
          </div>
        </el-table>
      </div>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button
        size="medium"
        @click="handleCancel">取 消</el-button>
      <el-button
        size="medium"
        :loading="loading"
        type="primary"
        @click="hanldeSave">确 定</el-button>
    </span>
  </el-dialog>
</template>

<script>
export default {
  props: {
    // 弹框是否展示
    visible: {
      type: Boolean,
      default: true
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 回填数据
    options: {
      type: Object,
      default: () => ({})
    },
    // 用户id
    userId: {
      type: String,
      default: ''
    },
  },
  data() {
    return {
      projectList: [], // 项目列表
      selectList: [], // 已选项目列表
      tableLoading: false,
      condition: '',
      roleList: [],
      selectLoading: false
    };
  },
  watch: {
    visible(val) {
      if (val) {
        this.getNewProjectList();
        this.getUserProject();
      }
    }
  },
  methods: {
    // 获取所有项目
    async getNewProjectList(params = {}) {
      this.tableLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getProjectList(params);
      this.tableLoading = false;
      if (success) {
        this.projectList = data || [];
      }
    },
    // 根据用户获取项目列表
    async getUserProject() {
      const params = {
        userId: this.userId,
      };
      const { success, data: {
        data
      }} = await this.$Model.getUserProject(params);
      if (success) {
        this.selectList = data || [];
      }
    },
    /**
     * 获取权限信息
     */
    async getRoleList(params = {}) {
      this.selectLoading = true;
      const { success, data: {
        data
      }} = await this.$Model.getRoleList({
        pageFlag: false,
        roleType: '2', // （1：系统角色；2：项目角色）
        // ...params
      });
      this.selectLoading = false;
      if (success && data) {
        this.roleList = data.list || [];
      }
    },
    // 搜索
    handleSearch() {
      this.getNewProjectList({
        condition: this.condition
      });
    },
    // 重置
    handleRefresh() {
      this.condition = '';
      this.getNewProjectList();
    },
    // 清空
    clear() {
      this.selectList = [];
      this.roleList = [];
    },
    // 选择角色名称
    handleSelect(row) {
      this.roleList = [];
      this.getRoleList({
        projectId: row.uuid
      });
    },
    // 添加项目
    handleAdd(row, index) {
      const { uuid } = row;
      const hasIncludes = this.selectList.some(v => v.uuid === uuid);
      if (!hasIncludes) {
        this.selectList.unshift(row);
      }
    },
    // 删除已选项目
    handleDelete(row, index) {
      this.selectList.splice(index, 1);
    },
    // 修改权限
    handleChange(value, row, index) {
      const item = {
        ...row,
        roleId: value
      };
      this.selectList.splice(index, 1, item);
    },
    // 取消
    handleCancel() {
      this.selectList = [];
      this.roleList = [];
      this.$emit('cancel', true);
    },
    // 保存
    hanldeSave() {
      const selectIds = this.selectList
        .map(v => v.projectId);
      if (!selectIds.length) {
        this.$message.warning('请完善已选信息');
        return;
      }
      this.$emit('submit', selectIds);
    }
  }
};
</script>

<style scoped lang="scss">
@import "../../assets/styles/dialog";
.association-project-comp {
  .table-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .table-content {
      width: calc(50% - 15px);
      height: 100%;
      .search-container {
        width: 100%;
        height: 50px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        margin-bottom: 10px;
        &.btns {
          justify-content: space-between;
          .title {
            font-size: 20px;
            font-weight: 500;
          }
        }
        .el-input {
          width: 240px;
          margin-right: 20px;
        }
      }
    }
  }
}
</style>
